<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>品优购 - 优质！优质！</title>
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/page-cart.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>

<body>
    <!--页面顶部-->
    <div id="nav-bottom">
        <!--顶部-->
        <div class="nav-top">
            <div class="top">
                <div class="py-container">
                    <div class="shortcut">
                        <ul class="fl">
                            <li class="f-item">品优购欢迎您！</li>
                            <li class="f-item content">请
                                <a href="login.html">登录</a>
                                <span>
                                    <a href="register.html">免费注册</a>
                                </span>
                            </li>
                        </ul>
                        <ul class="fr">
                            <li class="f-item">
                                <a href="member-order.html">我的订单</a>
                            </li>
                            <li class="f-item space"></li>
                            <li class="f-item">
                                <a href="member.html">我的品优购</a>
                            </li>
                            <li class="f-item space"></li>
                            <li class="f-item">关注品优购</li>
                            <li class="f-item space"></li>
                            <li class="f-item">网站导航</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--头部-->
            <div class="header">
                <div class="py-container">
                    <div class="yui3-g Logo">
                        <div class="yui3-u Left logoArea">
                            <a class="logo-bd" title="品优购" href="home.html"></a>
                        </div>
                        <div class="yui3-u Center searchArea">
                            <div class="search">
                                <form action="" class="sui-form form-inline">
                                    <div class="input-append">
                                        <input type="text" id="autocomplete" type="text"
                                            class="input-error input-xxlarge">
                                        <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                                    </div>
                                </form>
                            </div>
                            <div class="hotwords">
                                <ul>
                                    <li class="f-item">品优购首发</li>
                                    <li class="f-item">亿元优惠</li>
                                    <li class="f-item">9.9元团购</li>
                                    <li class="f-item">每满99减30</li>
                                    <li class="f-item">亿元优惠</li>
                                    <li class="f-item">9.9元团购</li>
                                    <li class="f-item">办公用品</li>
                                </ul>
                            </div>
                        </div>
                        <div class="yui3-u Right shopArea">
                            <div class="fr shopcar">
                                <div class="show-shopcar">
                                    <span class="car"></span>
                                    <a class="sui-btn btn-default btn-xlarge" href="cart.html">
                                        <span>我的购物车</span>
                                        <i class="shopnum">0</i>
                                    </a>
                                    <div class="clearfix shopcarlist"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="yui3-g NavList">
                        <div class="all-sorts-list">
                            <div class="yui3-u Left all-sort">
                                <h4>全部商品分类</h4>
                            </div>
                            <div class="sort">
                                <div class="all-sort-list2">
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">图书、音像、数字商品</a>
                                        </h3>
                                        <div class="item-list clearfix">
                                            <div class="subitem">
                                                <dl>
                                                    <dt>
                                                        <a href="list.html">电子书</a>
                                                    </dt>
                                                    <dd>
                                                        <em>
                                                            <a href="list.html">免费</a>
                                                        </em>
                                                        <em>
                                                            <a href="list.html">小说</a>
                                                        </em>
                                                        <em>
                                                            <a href="list.html">励志与成功</a>
                                                        </em>
                                                        <em>
                                                            <a href="list.html">婚恋/两性</a>
                                                        </em>
                                                        <em>
                                                            <a href="list.html">文学</a>
                                                        </em>
                                                        <em>
                                                            <a href="list.html">经管</a>
                                                        </em>
                                                        <em>
                                                            <a href="list.html">畅读VIP</a>
                                                        </em>
                                                    </dd>
                                                </dl>
                                                <dl>
                                                    <dt>
                                                        <a href="list.html">电子书</a>
                                                    </dt>
                                                    <dd>
                                                        <em>
                                                            <a href="list.html">免费</a>
                                                        </em>
                                                        <em>
                                                            <a href="list.html">小说</a>
                                                        </em>
                                                        <em>
                                                            <a href="list.html">励志与成功</a>
                                                        </em>
                                                        <em>
                                                            <a href="list.html">婚恋/两性</a>
                                                        </em>
                                                        <em>
                                                            <a href="list.html">文学</a>
                                                        </em>
                                                        <em>
                                                            <a href="list.html">经管</a>
                                                        </em>
                                                        <em>
                                                            <a href="list.html">畅读VIP</a>
                                                        </em>
                                                    </dd>
                                                </dl>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">家用电器</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">手机、数码</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">电脑、办公</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">家居、家具、家装、厨具</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">服饰内衣</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">个护化妆</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">运动健康</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">汽车用品</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">彩票、旅行</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">理财、众筹</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">母婴、玩具</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">箱包</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">运动户外</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                    <div class="item">
                                        <h3>
                                            <a href="list.html">箱包</a>
                                        </h3>
                                        <div class="item-list clearfix"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="yui3-u Center navArea">
                            <ul class="nav">
                                <li class="f-item">服装城</li>
                                <li class="f-item">美妆馆</li>
                                <li class="f-item">品优超市</li>
                                <li class="f-item">全球购</li>
                                <li class="f-item">闪购</li>
                                <li class="f-item">团购</li>
                                <li class="f-item">有趣</li>
                                <li class="f-item">秒杀</li>
                            </ul>
                        </div>
                        <div class="yui3-u Right"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="py-container">
        <div class="cart">
            <div class="cart-main">
                <div class="cart-list">
                    <div class="cart" class="cartnone">
                        <table style="text-align: center;" border="0" cellspacing="0" cellpadding="5">
                            <thead class="trs">

                                <tr>
                                    <th width="50"><input type="checkbox" name="selectAll">全选</th>
                                    <th width="300">商品图片</th>
                                    <th class="title" width="200">商品名称</th>
                                    <th width="200">商品单价</th>
                                    <th width="250">商品数量</th>
                                    <th width="200">商品小计</th>
                                    <th width="100">商品操作</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                            <tfoot>
                                <tr>
                                    <td><input type="checkbox" name="selectAll">全选</td>
                                    <td class="removeSelected">删除选中的商品</td>
                                    <td class="clear">清空购物车</td>
                                    <td>总价：￥<span class="totalPrice">000</span></td>
                                    <td>总数量：<span class="totalNum">15</span></td>
                                    <td></td>
                                    <td><button>结算</button></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--页面底部-->
    <div class="clearfix footer">
        <div class="py-container">
            <div class="footlink">
                <div class="Mod-service">
                    <ul class="Mod-Service-list">
                        <li class="grid-service-item intro  intro1">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>
                        </li>
                        <li class="grid-service-item  intro intro2">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>
                        </li>
                        <li class="grid-service-item intro  intro3">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>
                        </li>
                        <li class="grid-service-item  intro intro4">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>
                        </li>
                        <li class="grid-service-item intro intro5">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="clearfix Mod-list">
                    <div class="yui3-g">
                        <div class="yui3-u-1-6">
                            <h4>购物指南</h4>
                            <ul class="unstyled">
                                <li>购物流程</li>
                                <li>会员介绍</li>
                                <li>生活旅行/团购</li>
                                <li>常见问题</li>
                                <li>购物指南</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>配送方式</h4>
                            <ul class="unstyled">
                                <li>上门自提</li>
                                <li>211限时达</li>
                                <li>配送服务查询</li>
                                <li>配送费收取标准</li>
                                <li>海外配送</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>支付方式</h4>
                            <ul class="unstyled">
                                <li>货到付款</li>
                                <li>在线支付</li>
                                <li>分期付款</li>
                                <li>邮局汇款</li>
                                <li>公司转账</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>售后服务</h4>
                            <ul class="unstyled">
                                <li>售后政策</li>
                                <li>价格保护</li>
                                <li>退款说明</li>
                                <li>返修/退换货</li>
                                <li>取消订单</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>特色服务</h4>
                            <ul class="unstyled">
                                <li>夺宝岛</li>
                                <li>DIY装机</li>
                                <li>延保服务</li>
                                <li>品优购E卡</li>
                                <li>品优购通信</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>帮助中心</h4>
                            <img src="./images/wx_cz.jpg">
                        </div>
                    </div>
                </div>
                <div class="Mod-copyright">
                    <ul class="helpLink">
                        <li>关于我们

                        </li>
                        <li class="space">|</li>
                        <li>联系我们

                        </li>
                        <li class="space">|</li>
                        <li>关于我们

                        </li>
                        <li class="space">|</li>
                        <li>商家入驻

                        </li>
                        <li class="space">|</li>
                        <li>营销中心

                        </li>
                        <li class="space">|</li>
                        <li>友情链接

                        </li>
                        <li class="space">|</li>
                        <li>关于我们

                        </li>
                        <li class="space">|</li>
                        <li>营销中心

                        </li>
                        <li class="space">|</li>
                        <li>友情链接
                        </li>
                        <li class="space">|</li>
                        <li>关于我们</li>
                    </ul>
                    <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
                    <p>京ICP备08001421号京公网安备110108007702</p>
                </div>
            </div>
        </div>
    </div>
    <!--页面底部END-->
</body>
<script src="js/utils.js"></script>
<script>
    var username = getCookie('username')
    if (username) {
        document.querySelector('.content').innerHTML = `
            欢迎<b>${username}</b>登录
            <span style="cursor: pointer;" onclick = "logout()">注销</span>
            `
    }

    function logout() {
        removeCookie('username')
        document.querySelector('.content').innerHTML = `
        <li class="f-item content">请
            <a href="login.html">登录</a>
            <span>
            <a href="register.html">免费注册</a>
            </span>
        </li>
            `
    }

    if (!username) {
        alert('请先登录')
        document.querySelector('.content').onclick = function () {
            localStorage.setItem('url', location.href)
            location.href = 'login.html'
        }
    }

    var div = document.querySelector('.cart');
    var tbody = document.querySelector('.cart tbody');
    // 获取购物车数据，渲染到页面中即可
    sendAjax({
        url: 'http://localhost:8888/cart/list',
        data: {
            id: getCookie('userId')
        },
        headers: {
            authorization: localStorage.getItem('token')
        },
        success: res => {
            console.log(res);
            // 判断用户数购物车获取都的数据是否为空
            if (res.cart.length) {
                // 有数据 - 渲染
                var str = ''
                res.cart.forEach(v => {
                    // 所有的单选，我们需要根据数据库中的选中状态来设置复选框的选中状态

                    // data-id只是行内存放数据的一个标签，跟input里面的value作用是一样的
                    str += `
                    <tr>
                        <td data-id="${v.goods_id}"><input type="checkbox" name="selectOne" ${v.is_select?'checked':''}></td>
                        <td><img src="${v.img_small_logo}" alt=""></td>
                        <td class="title" width="100">${v.title.slice(0,10)}</td>
                        <td>${v.price}</td>
                        <td>
                            <input type="button" value="-" class="reduce">
                            <input type="number" data-stock="${v.goods_number}" name="number"  value="${v.cart_number}">
                            <input type="button" value="+" class="add">
                        </td>
                        <td class="subtotal">${v.price * v.cart_number}</td>
                        <td>删除</td>
                    </tr>
                `
                })
                tbody.innerHTML = str
                // 数据渲染完成
                // 在购物车页面的功能

                // 全选功能
                selectAll()
                // 单选功能 
                selectOne()
                // 数量的加和减
                addAndReduce()
                // 计算小计的功能
                subtotal()
                // 计算总数量和总价格
                total()
                // 删除单个商品
                remove()
                // 删除选中商品的功能
                removeSelected()
                // 清空购物车的功能
                clear()
            } else {
                // 购物车是空的，去挑选商品吧
                div.innerHTML = '<div class="cartnone">购物车是空的，去挑选商品吧！<a href="./list.html">商品页面</a></div>'
            }

        }
    })
    // 清空购物车的功能
    function clear() {
        // 获取清空按钮
        var btn = document.querySelector('.clear');
        btn.onclick = function () {
            // 询问用户
            if (!confirm('你确定要删除吗？')) return false
            // 将tbody清空
            document.querySelector('tbody').innerHTML = ''

            // 发送请求
            sendAjax({
                url: 'http://localhost:8888/cart/clear',
                headers: {
                    authorization: localStorage.getItem('token')
                },
                data: {
                    id: getCookie('userId')
                },
                success: res => {
                    div.innerHTML = '购物车是空的，去挑选商品吧！<a href="列表页.html">商品页面</a>'
                }
            })
        }
    }
    // 删除选中商品的功能
    function removeSelected() {
        // 获取删除选中的按钮 - 绑定事件
        document.querySelector('.removeSelected').onclick = function () {
            // 询问客户
            if (!confirm('你确定要删除吗？')) return
            // 删除
            // 页面效果
            // 从tbody中将没有选中的tr保留下来即可
            var trs = document.querySelectorAll('tbody>tr');
            // 将tbody内容清空
            var tbody = document.querySelector('tbody');
            tbody.innerHTML = ''
            // 遍历找出哪个是未选中的
            for (var i = 0; i < trs.length; i++) {
                if (!trs[i].firstElementChild.firstElementChild.checked) {
                    // 找到未选中的tr - 将tr再次放入tbody中
                    tbody.appendChild(trs[i])
                }
            }
            // 购物车数据删除
            sendAjax({
                url: 'http://localhost:8888/cart/remove/select',
                headers: {
                    authorization: localStorage.getItem('token')
                },
                data: {
                    id: getCookie('userId')
                },
                success: res => {
                    total()
                }
            })
        }
    }
    // 删除单个商品的功能
    function remove() {
        // 获取所有删除按钮
        var removeBtns = document.querySelectorAll('tbody td:last-child');
        // 循环绑定
        for (var i = 0; i < removeBtns.length; i++) {
            removeBtns[i].onclick = function () {
                // 碰到退出登录或删除数据的时候一定要访问用户是否继续
                if (!confirm('你确定要删除吗')) return
                // 将当前商品所在tr从tbody中删除
                this.parentElement.parentElement.removeChild(this.parentElement)
                // 发送ajax从数据库中删除当前商品
                // 获取当前商品id
                var id = this.parentElement.firstElementChild.getAttribute('data-id')
                sendAjax({
                    url: 'http://localhost:8888/cart/remove',
                    headers: {
                        authorization: localStorage.getItem('token')
                    },
                    data: {
                        id: getCookie('userId'),
                        goodsId: id
                    },
                    success: res => {
                        total()
                        // 判断购物车数据是否存在
                        if (document.querySelector('tbody').children.length === 0) {
                            div.innerHTML = '购物车是空的，去挑选商品吧！<a href="list.html">商品页面</a>'
                        }
                    }
                })

            }
        }
    }
    // 计算总数量和总价格
    function total() {
        // 获取所有的单选
        var selectOne = document.querySelectorAll('[name="selectOne"]');
        // 因为我们要找到所有已经选中的商品
        // 从中筛选出所有已经选中的 - filter
        // 将伪数组转成数组
        var arr = Array.prototype.slice.call(selectOne)
        var brr = arr.filter(item => item.checked)
        // 遍历所有的brr中的复选框，找到对应的小计累加
        var totalPrice = 0 //定义总价格变量为0
        var totalNum = 0 //定义总数量变量为0
        brr.forEach(item => {
            // 根据当前复选框找到对应的小计
            var subtotal = +item.parentElement.parentElement.lastElementChild.previousElementSibling.innerText
            // 根据当前复选框找到对应的数量
            var num = +item.parentElement.parentElement.children[4].children[1].value
            totalNum += num
            // 将所有遍历出来的小计累加
            totalPrice += subtotal
        })
        // 将结果放在总价格中
        document.querySelector('.totalPrice').innerText = totalPrice.toFixed(2)
        document.querySelector('.totalNum').innerText = totalNum
    }
    // 计算小计
    function subtotal() {
        // 获取所有数量，找到数量对应的单价啊，进行计算，放在小计td中
        // 获取所有数量文本框
        var numInput = document.querySelectorAll('[name="number"]');
        // 循环计算
        for (var i = 0; i < numInput.length; i++) {
            // 商品数量
            var num = numInput[i].value
            // 找对应的单价
            var price = numInput[i].parentElement.previousElementSibling.innerText
            var sub = num * price
            // 放在对应的小计td中
            numInput[i].parentElement.nextElementSibling.innerText = sub.toFixed(2)
        }
    }
    // 数量加和减
    function addAndReduce() {
        // 点击每个加
        // 获取所有加的按钮
        var addBtns = document.querySelectorAll('.add');
        for (var i = 0; i < addBtns.length; i++) {
            addBtns[i].onclick = function () {
                // 点击+，就需要让当前商品的数量 + 1
                // 先获取当前+对应的数量
                var num = +this.previousElementSibling.value //this的上一个兄弟标签
                // 让数量自增
                num++
                // 数量不能无止境的增加，因为每个商品都是有库存的
                // 获取当前商品的库存
                var stock = +this.previousElementSibling.getAttribute('data-stock')
                // 对num进行限制
                if (num > stock) {
                    num = stock
                    return
                }
                // 将自增后的数量放在上一个兄弟标签中
                this.previousElementSibling.value = num
                // 只是页面中效果可以增加了，但是每次刷新数量无法固定，又会还原成最初始的数量
                // 发送Ajax修改当前商品的数量
                // 获取当前点击的商品的id
                var id = this.parentElement.parentElement.firstElementChild.getAttribute('data-id')
                sendAjax({
                    url: 'http://localhost:8888/cart/number',
                    method: 'post',
                    headers: {
                        authorization: localStorage.getItem('token')
                    },
                    data: {
                        id: getCookie('userId'),
                        goodsId: id,
                        number: num
                    },
                    success: res => {
                        subtotal()
                        total()
                    }
                })
            }
        }

        // 点击每个减
        // 获取所有减的按钮
        var reduceBtns = document.querySelectorAll('.reduce');
        // 循环绑定事件
        for (var i = 0; i < reduceBtns.length; i++) {
            reduceBtns[i].onclick = function () {
                // 获取当前商品的数量
                var num = this.nextElementSibling.value
                // 事件触发时数量自减
                num--
                // 将数量进行限制
                if (num < 1) {
                    num = 1
                    return
                }
                // 将数量放在文本框中
                this.nextElementSibling.value = num
                // 发送请求修改商品数量 - 让数量修改后再次刷新也能固定好
                // parentElement 只读属性返回指定元素的父元素
                var id = this.parentElement.parentElement.firstElementChild.getAttribute('data-id')
                sendAjax({
                    url: 'http://localhost:8888/cart/number',
                    method: 'post',
                    headers: {
                        authorization: localStorage.getItem('token')
                    },
                    data: {
                        id: getCookie('userId'),
                        goodsId: id,
                        number: num
                    },
                    success: res => {
                        console.log(res)
                        subtotal()
                        total()
                    }
                })

            }
        }
        // 手动修改文本框中数量
        var numInput = document.querySelectorAll('[name="number"]');
        // 循环绑定事件
        for (var i = 0; i < numInput.length; i++) {
            numInput[i].oninput = function () {
                // 每次正在修改数量触发的事件
                // 对修改的数量做大小限制
                // 获取库存
                var stock = +this.getAttribute('data-stock')
                if (+this.value > stock) {
                    this.value = stock
                }
                if (+this.value < 1) {
                    this.value = 1
                }
            }
            // 当失去焦点的时候，数量就已经修改好了页数效果，需要发送请求修改数据中的数量
            // 失去焦点时
            numInput[i].onblur = function () {
                // 获取当前数量
                var num = +this.value
                var id = this.parentElement.parentElement.firstElementChild.getAttribute('data-id')
                sendAjax({
                    url: 'http://localhost:8888/cart/number',
                    method: 'post',
                    headers: {
                        authorization: localStorage.getItem('token')
                    },
                    data: {
                        id: getCookie('userId'),
                        goodsId: id,
                        number: num
                    },
                    success: res => {
                        console.log(res);
                        subtotal()
                        total()
                    }
                })
            }
        }
    }
    // 单选功能
    function selectOne() {
        // 当所有的单选选中后，让所有的全选保持选中状态，如果不是所有的单选都选中，让两个全选保持取消选中状态
        // 给所有的单选绑定单击事件
        var selectOneBtn = document.querySelectorAll('[name="selectOne"]');
        // 获取所有全选复选框
        var selectAllBtn = document.querySelectorAll('[name="selectAll"]');
        // 循环绑定
        for (var i = 0; i < selectOneBtn.length; i++) {
            selectOneBtn[i].onclick = function () {
                // 判断是否所有的单选都是选中
                // 将selectOneBtn这个伪数组转为数组
                var arr = Array.prototype.slice.call(selectOneBtn)
                // 调用数组的every方法来进行判断
                var bool = arr.every(item => item.checked)
                // 根据bool设置所有的全选
                for (var j = 0; j < selectAllBtn.length; j++) {
                    selectAllBtn[j].checked = bool
                }
                // 发送Ajax改变每个单选的选中状态的数据
                // 获取当前点击的这个单选所在商品的id - 在渲染页面的时候，给当前复选框的父标签td上添加了一个属性,data-id,对应的值，就是当前商品的id
                var id = this.parentElement.getAttribute('data-id')
                sendAjax({
                    url: 'http://localhost:8888/cart/select',
                    method: 'post',
                    headers: {
                        authorization: localStorage.getItem('token')
                    },
                    data: {
                        id: getCookie('userId'),
                        goodsId: id
                    },
                    success: res => {
                        console.log(res);
                        total()
                    }
                })
            }
        }
    }
    // 全选功能
    function selectAll() {
        // 需要给两个全选的复选框绑定单击事件，根据自身的选中状态，设置所有单选的选中状态
        // 获取两个全选的复选框
        var selectAllBtn = document.querySelectorAll('[name="selectAll"]')
        // 获取所有的单选复选框
        var selectOneBtn = document.querySelectorAll('[name="selectOne"]')

        // 判断是否所有的单选都是选中状态，如果是，就设置两个全选为选中状态，否则就设置两个全选为取消状态
        // 将所有的单选这个伪数组，转为数组，然后使用every方法进行判断
        var arr = Array.prototype.slice.call(selectOneBtn)
        var bool = arr.every(item => {
            // 因为当item.checked为true的时候，整体条件为true，当item.checked为false的时候，整体条件为false - 所有直接return item.checked其实就是return 整体条件
            return item.checked
        })
        // 当bool这个变量的值为true的时候，就表示所有的单选框是选中状态，此时就需要设置所有的全选为选中状态
        // 因为bool为true就设置为true，bool为false就设置为false，所以不用判断了，直接设置
        for (var j = 0; j < selectAllBtn.length; j++) {
            selectAllBtn[j].checked = bool
        }
        // 绑定事件 - 这两个全选按钮他们要处理的逻辑是一样的 - 通过循环绑定
        for (var i = 0; i < selectAllBtn.length; i++) {
            selectAllBtn[i].onclick = function () {
                // 根据自己的选中状态去设置所有单选的选中状态
                // 判断自身是否是选中的
                // 自身 - this
                // 选中 - checked - 布尔值
                // 定义选中状态
                var checkedStatus = this.checked
                // 根据这个状态设置所有单选 - 当自身是选中状态时，就设置所有单选为选中状态，当自己是取消选中状态时，设置所有的单选是取消选中的
                // 判断
                if (checkedStatus) {
                    // 设置所有单选为选中
                    // 给每个"单选"的复选框设置checked为true
                    // 循环设置
                    for (var j = 0; j < selectOneBtn.length; j++) {
                        selectOneBtn[j].checked = true
                    }
                    // 当前全选控制不了另一个全选 - 点击自身，控制所有的全选
                    //     for (var j = 0; j < selectAllBtn.length; j++) {
                    //         selectAllBtn[j].checked = true
                    //     }
                    // } else {
                    //     // 设置所有单选为取消状态
                    //     // 给每个"单选"的复选框设置checked为false
                    //     for (var j = 0; j < selectOneBtn.length; j++) {
                    //         selectOneBtn[j].checked = false
                    //     }
                    //     for (var j = 0; j < selectAllBtn.length; j++) {
                    //         selectAllBtn[j].checked = false
                    //     }

                    // 根据上面代码，发现，如果checkedStatus是true，设置的就是true，如果checkedStatus是false，设置的是false，所有其实是不用判断的，直接将checkedStatus哪来设置就好
                    for (var j = 0; j < selectOneBtn.length; j++) {
                        selectOneBtn[j].checked = checkedStatus
                    }
                    for (var j = 0; j < selectAllBtn.length; j++) {
                        selectAllBtn[j].checked = checkedStatus
                    }
                    // 如果在循环中绑定事件，事件函数中就无法使用循环的变量了，所以在事件函数中，使用同名的变量是没有影响的

                    // 现在页面中全部选中和全部取消的效果是做好了，但是没有改变数据中数据的选中数据，接口中提供了一个改变所有商品选中状态的接口 - 发送Ajax改变所有商品的选中状态，希望刷新后，能让当前选中的状态保持到下一次刷新
                    sendAjax({
                        url: 'http://localhost:8888/cart/select/all',
                        method: 'post',
                        headers: {
                            authorization: localStorage.getItem('token')
                        },
                        data: {
                            id: getCookie('userId'),
                            type: Number(checkedStatus)
                            // true是1，false是0
                        },
                        success: res => {
                            total()
                        }
                    })
                }
            }
        }

    }
</script>

</html>